<template>
	<view >
		<view class="job-header-box">
			<u-search :inputStyle="{	fontFamily: 'PingFang SC'}" :actionStyle="{
			background: '#FFFFFF',
			width: '180rpx',
	        height: '60rpx',
			lineHeight: '60rpx',
			fontFamily: 'PingFang SC',
			borderRadius: '30rpx',
		    alignItems: 'center',
		    textAlign: 'center'
		    }" placeholder="请输入职位名称" inputAlign="center" v-model="name" height="70" actionText="查询" @custom="custom">
			</u-search>


		</view>
		<view class="job-list">
			<block v-for="(job, i) in jobList" :key="i">
				<view class="job-item" @click="jobInfo(job.id)">
					<view class="job-item-name-salary">
						<view class="job-name">
							{{job.name}}
						</view>
						<view class="job-salary">
							{{job.salary}}
						</view>
					</view>
					<view class="job-item-name-salary">
						<view class="job-name">
							{{job.company}}
						</view>
						<view class="job-salary">
							{{job.address}}
						</view>
					</view>
					<view class="job-createtime">{{job.createTime | dateFormat}}</view>
				</view>
			</block>
			<u-divider v-show="pageNum >= totalPages">没有更多了</u-divider>
		</view>
		<view class="demand">
			<view class="title" @click="jobNew()" >发布招聘</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				jobList: [],
				name: "",
				pageNum: 1,
				pageSize: 20,
				totalPages: 0, //总页数
				total: '', //总条数
			};
		},
		filters: {
			//过滤器 用于格式化时间
			dateFormat: function(value) {
				var result = value.slice(0, 10);
				// 返回
				return result;
			},
		},
		onLoad() {
			this.pageNum = 1;
			this.getWindJobs(this.name);
		},
		methods: {
			/**
			 * 下拉刷新回调函数
			 */
			onPullDownRefresh() {
				console.log("下拉刷新")

				this.pageNum = 1;
				this.getWindJobs(this.name);
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 500);

			},
			/**
			 * 上拉加载更多
			 */
			onReachBottom() {
				console.log("上拉加载更多" + this.pageNum + "  " + this.totalPages)
				if (this.pageNum >= this.totalPages) {
					return
				}
				// 加载更多数据
				this.pageNum++;
				this.getWindJobs(this.name);
			},
			jobInfo(id) {

				uni.navigateTo({
					url: '/subpackage/industry_job/industry_job_detail?id=' + id
				})
			},
			jobNew() {
			
				uni.navigateTo({
					url: '/subpackage/industry_job/industry_job_new'
				})
			},
			
			custom(e) {
				this.pageNum = 1;
				this.jobList = {};
				this.getWindJobs(this.name);
			},
			getWindJobs(name) {
				this.$u.api.getWindJobs({
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						name: this.name,
					})
					.then(res => {
						this.total = res.total;
						this.totalPages = res.totalPages;
						var resultList = res.rows;
						if (this.pageNum == 1) {
							this.jobList = resultList;
						} else {
							this.jobList = this.jobList.concat(resultList);
						}
					});
			}
		}
	}
</script>
<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.demand {
		position: fixed;
		background-color: #3BA2FF;
		right: 20rpx;
		bottom: 50rpx;
		width: 130rpx;
		height: 130rpx;
		line-height: 130rpx;
		text-align: center;
		border-radius: 50%;
		.title{
			color: #FFFFFF;
			font-size: 30rpx;
		}
	}

	.job-header-box {
		flex-shrink: 0; //保持内容不缩放，适用于内容不确定大小时候
		// height:100rpx; //设置高度为100，如果内容确定为这么高的话

		background-color: #3BA2FF;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.job-list {
		flex-grow: 1; //充满屏幕
		// height: 100vh; //如果中间不充满屏幕的话，自适应，底部会跟随在中间布局后面
		overflow: auto;
		background-color: #F7F7F7;
	}

	.job-item {
		display: flex;
		margin: 15rpx 15rpx;
		background-color: #FFFFFF;
		flex-direction: column;
		justify-content: space-around;
		align-items: left;

		.job-item-name-salary {
			padding: 15rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.job-name {
				//margin-top: 36rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				height: 70rpx;
				overflow: hidden;
				text-overflow: ellipsis; //文本溢出显示省略号
			}

			.job-salary {
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #999999;
				margin-bottom: 36rpx;
			}
		}

		.job-createtime {
			font-size: 26rpx;
			font-family: PingFang SC;
			margin-left: 10rpx;
		}
	}

</style>
